<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jQury.js"></script>
    <script>
      $(function(){
   //始发之地

  //获取当前浏览器的url
   var url = window.location.href
  //在字符串中定位到最后一个=号的位置，然后+1定位到=号之后的第一个字符
     var index = url.lastIndexOf("=")+1
   //字符串截取，从index位置一直将url截取至最后一个字符
     var sid =url.substring(index)
     let URL ="http://127.0.0.1:5000/update/"+sid
     

     //数据回显：
     $.get(URL,function(data){
        
        let str = ""

        str +="书名：  <input type='text' name='name' value="+data.name +"><br>"
         
        str+="价格：  <input type='text' name='price' value="+data.price +"><br>"
         
        str+="描述：  <input type='text' name='summary' value="+data.summary +"><br>"
        str+=" <input type='submit' value='提交'>"
        
 
       $(".updateForm").html(str)
       Str ="修改书本id为"+ sid+",书名为"+data.name+"的修改页面"
       $(".aa").text(Str)
       $(".updateForm").prop(action,URL)
       
       
     })
      // 获取表单元素  
     const form = document.getElementById('myForm'); 
      
      // 添加提交事件处理函数  
      form.addEventListener('submit', function(event) {  
        event.preventDefault(); // 阻止表单默认提交行为  
        
        // 获取表单数据，这里使用jQuery的serialize()方法将表单数据序列化为URL编码的字符串  
        const formData = $(form).serialize();  
        
        // 设置跳转目标URL，这里假设后台处理表单数据的URL为'/submit-form'  
        const redirectUrl = 'file:///F:/typora-root/Typora/%E5%8D%9A%E5%AE%A2%E7%AC%94%E8%AE%B0/vue-qianduan/index.html'; // 初始页面的URL  
        
        // 使用AJAX发送表单数据到后台处理，并获取响应数据  
        $.ajax({  
          type: 'POST', // 使用POST方法提交表单数据  
          url: URL, // 后台处理表单数据的URL  
          data: formData, // 将表单数据作为请求体发送  
          success: function(response) {  
            // 处理从后台传来的响应数据，这里假设响应数据是一个JSON对象  
            console.log(response); // 在控制台输出响应数据  
        
            // 跳转到初始页面  
            window.location.href = redirectUrl; // 设置跳转目标URL为初始页面的URL  
          },  
          error: function(xhr, status, error) {  
            // 处理请求错误情况，这里可以在控制台输出错误信息进行调试  
            console.error('Error:', error); // 在控制台输出错误信息  
          }  
        });  
      });  
           

   //始发之地末端
      })

    </script>
    <style>
        body{
            background-color: gray;
        }
        .mainBox{
            margin-left: 500px;
            
        }
   .updateBox{
    background-color: #fff;
    height: 1035px;
    width: 1000px;
    display: flex;
    justify-content: center;
    line-height: 30px;
    /* margin: 400px; */
    padding-top: 400px;
    
   
   }
   .updateForm{
    width: 400px;
    height: 200px;
    text-align: center;
    line-height: 50px;
    border: black 5px solid;
    padding-top: 100px;
   }
   .aa{
    position: relative;
    left: 350px;
    top: 450px;
    
   }


    </style>
</head>
<body>
    <!-- <p class="aa">123</p> -->
    
    <div class="mainBox">
        <p class="aa">123</p>
   <div class="updateBox">
    
    <form id="myForm" class="updateForm" action="" method="post">
         
        
        

    </form>
    </div>
    </div>
</body>
</html>